<template>
    <div class="admin_address_wrap" @touchmove.stop="stop_slider" @touchstart="start_slider">
        <div class="add_header">
           <p>请选择地址</p><span @click="cancle1"></span>
        </div>
         <div class="add_body" ref="scroll_wrap">
           <p v-if="!isLoading&&address_list_reverse.length===0">没有可选地址哦，快添加一个吧！</p>
            <div @click="selected_address(item)" class="content" v-for="( item , index ) in address_list_reverse">
                <p><span>{{item.names}}</span> <b>{{item.phone}}</b><i v-show="item.status">默认</i></p>
                <h5>{{item.region+' '+item.address}}</h5>
              <div>
                <span :class="ID===item.addrId?'active':''"></span><p @click.stop="set_address(item)">修改地址</p>
              </div>
            </div>
         </div>
         <div class="add_footer" @click="(titl='添加新地址' , add_address=true , set_data=null)">
            +添加新地址
         </div>
         <add-address v-if="add_address" :data="set_data" @cancle="cancle" @add_address_ok="add_address_ok" :title="titl"></add-address>
         <div class="loading_wrap" v-show="isLoading">
           <loading></loading>
         </div>
    </div>
</template>

<script>
  import back from 'components/back'
  import {stop_slider} from 'assets/base/base'
  import addAddress from 'components/add_address'
  import {get_cookie} from 'assets/cookie/cookie'
  import {get_address_list} from 'api/address'
  import loading from 'base/loading'
    export default {
        name: "addres",
      props:['title','id'],
      data(){
          return{
            add_address:false,
            address_list:[],
            set_data:null,
            titl:'',
            ID:'',
            isLoading:false
          }
      },
      created(){
          this.ID=this.id
      this.get_address_list()
      },
      computed:{
        address_list_reverse(){
          return  this.address_list.reverse()
        }
      },
      methods:{
        start_slider(e){
          this.start={
            X:e.touches[0].pageX,
            Y:e.touches[0].pageY
          }
        },
        stop_slider(e){
          stop_slider(e,this.$refs.scroll_wrap,this.start)
        },
        add_address_ok(oldID,item){
          this.get_address_list()
          this.add_address=false
          if(item){
             if(this.ID===oldID){
               this.ID=item.id
             }
          }
        },
        get_address_list(){
          this.isLoading=true
          get_address_list({
           token:get_cookie('key')
          }).then((res)=>{
            this.isLoading=false
            if(res.status===200&&res.data.resStatus===0) {
              this.address_list = res.data.data
              console.log(this.address_list)
            }
          })
        },
        cancle(){
          this.add_address=false
        },
        cancle1(){
          for(let i=0;i<this.address_list.length;i++){
            if(this.ID===this.address_list[i].addrId){
              this.$emit('cancle',this.address_list[i])
              return
            }
          }
          this.$emit('cancle')
        },
        selected_address(item){
          this.$emit('selected_address',item)
        },
        set_address(item){
          this.set_data=item
          this.titl='修改地址'
          this.add_address=true
        }
      },
      components:{
          back,
        addAddress,
        loading
      }
    }
</script>

<style scoped lang="scss">
    .admin_address_wrap{
      position: fixed;
      background:#eee;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 11;
    }
    .add_header{
      position: absolute;
      height: 45px;
      width: 100%;
      background-color: #fff;
      z-index: 1;
      >p{
        height: 45px;
        line-height: 45px;
        color: #999;
      }
      >span{
        position: absolute;
        right: 10px;
        top: 13px;
        height: 15px;
        width: 15px;
        background-image: url('../assets/img/x.png');
        background-size: 100% 100%;
      }
    }
    .add_footer{
      position: absolute;
      bottom: 10px;
      height: 35px;
      background: #019fe8;
      width: 80%;
      left: 10%;
      line-height: 35px;
      margin: 0 auto;
      color: #fff;
      letter-spacing: 1px;
      border-radius: 5px;
    }
    .add_body{
   padding-bottom: 55px;
   padding-top: 48px;
   height:100%;
   width: 100%;
   overflow: auto;
   -webkit-overflow-scrolling: touch;
      >p{
        margin-top: 30px;
        color: #999;
      }
 }
    .content{
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #fff;
    width: 95%;
    margin: 10px auto 0 auto;
    >p{
      overflow: hidden;
      height: 14px;
      line-height: 14px;
      >span{
        float: left;
        margin-left: 22px;
      }
      >b{
        float: left;
        margin-left: 15px;
      }
      >i{
        float: right;
        margin-right: 13px;
      }
    }
    >h5{
      text-align: left;
      padding-left: 48px;
      margin-top: 13px;
      font-weight: 500;
      color: #999;
    }
    >div{
      height: 25px;
      line-height: 25px;
      margin-top: 10px;
      padding-top: 5px;
      border-top: 1px solid #ddd;
      >span{
        float: left;
        width: 20px;
        height: 20px;
        border: 1px solid #aaa;
        border-radius: 50%;
        margin-left: 20px;
      }
      >.active{
        background-size: 100% 100%;
        background-image: url('../assets/img/activeRed.png');
        border: none;
      }
      >p{
        float: right;
        height: 25px;
        margin-right: 26px;
      }
    }
  }
  .loading_wrap{
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    left: 0;
    z-index: 10;
    background-color: rgba(255,255,255,0.2);
  }
</style>
